<template>
  <div id="login">
    <div class="loginBg">
      <img src="https://gundam-1253271162.cos.ap-guangzhou.myqcloud.com/commonjs/macPAC%20%E8%89%BA%E6%9C%AF%E4%B8%AA%E6%80%A74k%E5%A3%81%E7%BA%B8%20%E7%BA%A2%E9%BB%84_%E5%BD%BC%E5%B2%B8%E5%9B%BE%E7%BD%91.jpg" alt="">
    </div>
    <div class="loginWindow">
      <div class="loginWindowBody">
        <div class="logo">
          <img src="@/assets/logo.png" alt="">
        </div>
        <div class="loginWindowView">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="登录" name="login">
              <div class="loginFormView">
                <el-form
                    ref="ruleFormRef"
                    :model="ruleForm"
                    :rules="rules"
                    label-width="120px"
                    class="demo-ruleForm"
                    size="default"
                    status-icon
                >
                  <el-form-item label="用户名：" prop="userName">
                    <el-input v-model="ruleForm.userName" />
                  </el-form-item>
                  <el-form-item label="密码：" prop="password">
                    <el-input v-model="ruleForm.password" type="password" show-password/>
                  </el-form-item>
                </el-form>
              </div>
              <div class="loginBtn">
                <el-button type="primary" color="#00a1a1" size="large" @click="login()">登录</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="注册" name="register">
              <div class="loginFormView">
                <el-form
                    ref="ruleFormRef"
                    :model="registerForm"
                    :rules="registerRules"
                    label-width="120px"
                    class="demo-ruleForm"
                    size="default"
                    status-icon
                >
                  <el-form-item label="用户名：" prop="userName">
                    <el-input v-model="registerForm.userName" />
                  </el-form-item>
                  <el-form-item label="密码：" prop="password">
                    <el-input v-model="registerForm.password" type="password" show-password/>
                  </el-form-item>
                  <el-form-item label="确认密码：" prop="checkPass">
                    <el-input v-model="registerForm.checkPass" type="password" show-password/>
                  </el-form-item>
                </el-form>
              </div>
              <div class="loginBtn">
                <el-button type="primary" color="#00a1a1" size="large" @click="register()">注册</el-button>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Login">
import {reactive, ref} from "vue";
import router from "../../router";

const ruleForm = reactive({
  userName: '',
  password: ''
})

const registerForm = reactive({
  userName: '',
  password: '',
  checkPass: '',
})

const rules = reactive({
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ]
})

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请先输入密码'))
  } else if (value !== ruleForm.pass) {
    callback(new Error("两次密码不一致"))
  } else {
    callback()
  }
}


const registerRules = reactive({
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  checkPass: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    { validator: validatePass2, trigger: 'blur'}
  ]
})

const activeName = ref('login')

const handleClick = (tab, event) => {
  console.log(tab, event)
}

const login = () => {
  router.push('/')
}

const register = () => {
  router.push('/')
}

</script>

<style scoped lang="less">
#login {
  width: 100%;
  height: 100%;
  position: fixed;

  .loginBg {
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    position: absolute;

    & > img {
      width: 100%;
      height: 100%;
    }
  }

  .loginWindow {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    align-items: center;
    justify-content: center;

    .loginWindowBody {
      width: 600px;
      height: auto;
      position: relative;
      box-sizing: border-box;
      padding:30px 20px;
      display: flex;
      display: -webkit-flex;
      display: -moz-flex;
      align-items: center;
      background-color: rgba(255,255,255,0.9);
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);

      .logo {
        width: 150px;
        flex-basis: 150px;
        box-sizing: border-box;

        height: auto;
        flex-shrink: 0;
        text-align: center;

        img {
          width: 100px;
          height: auto;
        }
      }

      .loginWindowView {
        width: calc(100% - 150px);
        flex-basis: calc(100% - 150px);
        box-sizing: border-box;
        padding-left: 20px;
        border-left: 5px solid #00a1a1;
        flex-shrink: 0;
      }

      .loginFormView {
        width: 100%;
        height: auto;
        padding-top: 10px;
        box-sizing: border-box;
      }

      .loginTabView {
        width: 100%;
        height: auto;
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
      }

      .loginBtn {
        width: 100%;
        height: auto;
        text-align: right;
      }
    }
  }
}
</style>
